<template>
  <div class="home">
    <div class="top">
      <div class="left">
        <span class="lbtn" @click="goHome">首页</span>
      </div>
      <div class="center">
        <div class="title">智慧餐厅可视化大数据平台</div>
      </div>
      <div class="right">
        <span class="rbtn">统计报告</span>
      </div>
    </div>
    <el-row :gutter="20">
      <el-col :span="8">
        <el-card
          style="width: 100%; height: 330px; margin-bottom: 20px; background: url(./images/bg1.png)"
        >
          <div id="line" ref="lineChart"></div>
        </el-card>

        <!-- <el-card class="table" shadow="always" style="margin-bottom: 50px;background: url(./images/bg1.png);">
                    <el-table :data="dateinformation2" style="width: 100%;">

                        <el-table-column prop="name" label="餐厅名称" width="180" />
                        <el-table-column prop="number" label="总订单数" width="180">
                        </el-table-column>
                        <el-table-column prop="money" label="总销售量" />
                    </el-table>
                </el-card> -->

        <div class="bar-pie1">
          <el-card style="width: 100%; height: 370px; background: url(./images/bg1.png)">
            <div id="bar1" ref="barChart1"></div>
          </el-card>
        </div>
      </el-col>

      <el-col :span="16">
        <!-- <el-card style="width: 100%; height: 330px; margin-bottom: 20px;background: url(./images/bg1.png);">
                    <div id="line" ref="lineChart"></div>
                </el-card> -->

        <el-card
          style="width: 100%; height: 330px; margin-bottom: 30px; background: url(./images/bg1.png)"
        >
          <div id="line1" ref="lineChart1"></div>
        </el-card>

        <div class="bar-pie">
          <el-card style="width: 49%; height: 360px; background: url(./images/bg1.png)">
            <div id="bar" ref="barChart"></div>
          </el-card>

          <el-card style="width: 49%; height: 360px; background: url(./images/bg1.png)">
            <div id="pie" ref="pieChart"></div>
          </el-card>
        </div>
      </el-col>
    </el-row>
  </div>
</template>
<script setup lang="ts">
import * as echarts from 'echarts'
import axios from 'axios'
import { useRouter, useRoute } from 'vue-router'
import { reactive, ref, onMounted } from 'vue'

const router = useRouter()
const route = useRoute()

const reviewmenu = ref([])

const goHome = () => {
  router.push('/layout')
}
type allinformation = {
  //所有餐厅日销售
  restaurantid: string
  addressareaid: string
  restauranttypename: string
  restaurantname: string
  password: string
  image: string
  phone: string
  createtime: string
  updatetime: string
  introduction: string
  addressdetail: string
  surplus: string
  state: string
  qualification: string
  point: string
  sales: string
  date: DateInfo[]
}
type allinformation1 = {
  name: string
  month: string
  date: string
  number: string
  person: string
  avgprice: string
  money: string
}
type DateInfo = {
  month: string
  date: string
  number: string
  person: string
  avgprice: string
  money: number
}
const dateinformation = ref([] as allinformation[])
const dateinformation1 = ref([] as allinformation[])
const dateinformation2 = ref([] as allinformation1[])
const fetchData = () => {
  //餐厅日销售
  axios({
    method: 'GET',

    url: 'http://localhost:8080/data/dayres',
    headers: {
      'Content-Type': 'application/octet-stream',
      Authorization: window.localStorage.getItem('RestaurantToken')
    }
  }).then((res) => {
    const { data } = res
    dateinformation.value = data.data
    console.log(res)
    drawCharts()
  })
}

const fetchData1 = () => {
  //餐厅月销售
  axios({
    method: 'GET',

    url: 'http://localhost:8080/data/monthres',
    headers: {
      'Content-Type': 'application/octet-stream',
      Authorization: window.localStorage.getItem('RestaurantToken')
    }
  }).then((res) => {
    const { data } = res
    dateinformation1.value = data.data
    console.log(res)
    drawCharts()
  })
}

const fetchData2 = () => {
  //餐厅月销售
  axios({
    method: 'GET',

    url: 'http://localhost:8080/data/allres',
    headers: {
      'Content-Type': 'application/octet-stream',
      Authorization: window.localStorage.getItem('RestaurantToken')
    }
  }).then((res) => {
    const { data } = res
    dateinformation2.value = data.data
    console.log('dddd')
    console.log(res)
    drawCharts()
  })
}
onMounted(() => {
  fetchData()
  fetchData1()
  fetchData2()
})

const drawCharts = () => {
  const lineChart = echarts.init(document.getElementById('line'))
  const barChart = echarts.init(document.getElementById('bar'))
  const pieChart = echarts.init(document.getElementById('pie'))
  const lineChart1 = echarts.init(document.getElementById('line1'))
  const barChart1 = echarts.init(document.getElementById('bar1'))

  // 绘制折线图
  lineChart.setOption({
    title: {
      text: '餐厅日收入对比',
      textStyle: {
        align: 'center',
        color: '#fff',
        fontSize: 20
      },
      top: '3%',
      left: '0%'
    },
    backgroundColor: '#0f375f',
    grid: {
      top: '25%',
      bottom: '10%',
      right: '5% ' //也可设置left和right设置距离来控制图表的大小
    },
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow',
        label: {
          show: true
        }
      }
    },
    toolbox: {
      //工具栏,内置有导出图片，数据视图，动态类型切换，数据区域缩放，重置五个工具。
      feature: {
        //各工具配置项。
        dataView: {
          //数据视图工具，可以展现当前图表所用的数据，编辑后可以动态更新。
          show: true, //是否显示组件。
          readOnly: false,
          optionToContent: function (opt) {
            var axisData = opt.xAxis[0].data
            var series = opt.series
            var table = '<table style="width:100%;text-align:center"><tbody><tr>' + '<td>日期</td>'
            for (var i = 0, l = series.length; i < l; i++) {
              table += '<td>' + series[i].name + '</td>'
            }

            for (var i = 0, l = axisData.length; i < l; i++) {
              table += '<tr>' + '<td>' + axisData[i] + '</td>'

              // 内部循环：根据 series 动态生成数据列
              for (var j = 0, len = series.length; j < len; j++) {
                table += '<td>' + series[j].data[i] + '</td>'
              }

              table += '</tr>'
            }

            table += '</tbody></table>'
            return table
          }
        },
        magicType: {
          //动态类型切换 示例：feature: { magicType: {type: ['line', 'bar', 'stack', 'tiled']}}
          show: true,
          type: ['line', 'bar', 'stack', 'tiled']
        },
        restore: {
          //配置项还原。
          show: true
        },
        saveAsImage: {
          //保存为图片。
          show: true
        }
      }
    },
    legend: {
      data: dateinformation.value.map((item) => item.restaurantname), // 使用餐厅名称作为图例
      top: '15%',
      left: '20%',
      textStyle: {
        color: '#fff'
      }
    },
    xAxis: {
      type: 'category',
      data: dateinformation.value[0].date.map((date) => date.date), // 使用 dateinformation 数组中第一个元素的日期作为 x 轴数据
      axisLine: {
        show: true, //隐藏X轴轴线
        lineStyle: {
          color: '#01FCE3'
        }
      },
      axisTick: {
        show: true //隐藏X轴刻度
      },
      axisLabel: {
        show: true,
        textStyle: {
          color: '#ebf8ac' //X轴文字颜色
        }
      }
    },
    yAxis: {
      type: 'value',
      name: '元',
      nameTextStyle: {
        color: '#ebf8ac'
      },
      splitLine: {
        show: false
      },
      axisTick: {
        show: true
      },
      axisLine: {
        show: true,
        lineStyle: {
          color: '#FFFFFF'
        }
      },
      axisLabel: {
        show: true,
        textStyle: {
          color: '#ebf8ac'
        }
      }
    },
    series: dateinformation.value.map((item) => ({
      name: item.restaurantname,
      type: 'line',
      smooth: true, //平滑曲线显示
      showAllSymbol: true, //显示所有图形。
      symbol: 'circle', //标记的图形为实心圆
      symbolSize: 10, //标记的大小
      itemStyle: {
        //折线拐点标志的样式
        color: '#058cff'
      },
      lineStyle: {
        color: '#058cff'
      },
      areaStyle: {
        color: 'rgba(5,140,255, 0.2)'
      },
      data: item.date.map((dateItem) => dateItem.money) // 使用 dateinformation 数组中每个元素的日期数据作为 y 轴数据
    }))
  })

  var fontColor = '#30eee9'
  const seriesData: {
    name: string
    type: string
    smooth: boolean
    showAllSymbol: boolean
    symbol: string
    symbolSize: number
    itemStyle: { color: string }
    lineStyle: { color: string }
    areaStyle: { color: string }
    data: never[]
  }[] = [] // 存储所有餐厅在不同日期的 person 数据
  dateinformation.value.forEach((item) => {
    const seriesItem = {
      name: item.restaurantname,
      type: 'line',
      smooth: true,
      showAllSymbol: true,
      symbol: 'circle',
      symbolSize: 10,
      itemStyle: {
        color: '#058cff'
      },
      lineStyle: {
        color: '#058cff'
      },
      areaStyle: {
        color: 'rgba(5,140,255, 0.2)'
      },
      data: [] // 存储该餐厅在不同日期的 person 数据
    }
    item.date.forEach((dateItem) => {
      seriesItem.data.push(dateItem.person)
    })
    seriesData.push(seriesItem)
  })
  // 绘制折线图
  lineChart1.setOption({
    title: {
      text: '餐厅人流量对比',
      textStyle: {
        align: 'center',
        color: '#fff',
        fontSize: 20
      },
      top: '3%',
      left: '40%'
    },
    backgroundColor: '#11183c',
    grid: {
      left: '5%',
      right: '10%',
      top: '20%',
      bottom: '15%',
      containLabel: true
    },
    tooltip: {
      show: true,
      trigger: 'item'
    },
    toolbox: {
      //工具栏,内置有导出图片，数据视图，动态类型切换，数据区域缩放，重置五个工具。
      feature: {
        //各工具配置项。
        dataView: {
          //数据视图工具，可以展现当前图表所用的数据，编辑后可以动态更新。
          show: true, //是否显示组件。
          readOnly: false,
          optionToContent: function (opt) {
            var axisData = opt.xAxis[0].data
            var series = opt.series
            var table = '<table style="width:100%;text-align:center"><tbody><tr>' + '<td>日期</td>'
            for (var i = 0, l = series.length; i < l; i++) {
              table += '<td>' + series[i].name + '</td>'
            }

            for (var i = 0, l = axisData.length; i < l; i++) {
              table += '<tr>' + '<td>' + axisData[i] + '</td>'

              // 内部循环：根据 series 动态生成数据列
              for (var j = 0, len = series.length; j < len; j++) {
                table += '<td>' + series[j].data[i] + '</td>'
              }

              table += '</tr>'
            }

            table += '</tbody></table>'
            return table
          }
        },
        magicType: {
          //动态类型切换 示例：feature: { magicType: {type: ['line', 'bar', 'stack', 'tiled']}}
          show: true,
          type: ['line', 'bar', 'stack', 'tiled']
        },
        restore: {
          //配置项还原。
          show: true
        },
        saveAsImage: {
          //保存为图片。
          show: true
        }
      }
    },
    legend: {
      show: true,
      x: 'center',
      y: '35',
      icon: 'stack',
      itemWidth: 10,
      itemHeight: 10,
      textStyle: {
        color: '#1bb4f6'
      },
      data: dateinformation.value.map((item) => item.restaurantname)
    },
    xAxis: [
      {
        type: 'category',
        boundaryGap: false,
        axisLabel: {
          color: fontColor
        },
        axisLine: {
          show: true,
          lineStyle: {
            color: '#397cbc'
          }
        },
        axisTick: {
          show: false
        },
        splitLine: {
          show: true,
          lineStyle: {
            color: '#195384'
          }
        },
        data: dateinformation.value[0]?.date.map((date) => date.date)
      }
    ],
    yAxis: [
      {
        type: 'value',
        name: '人数',
        min: 0,
        max: 50,
        axisLabel: {
          formatter: '{value}',
          textStyle: {
            color: '#2ad1d2'
          }
        },
        axisLine: {
          lineStyle: {
            color: '#27b4c2'
          }
        },
        axisTick: {
          show: false
        },
        splitLine: {
          show: true,
          lineStyle: {
            color: '#11366e'
          }
        }
      }
    ],
    series: seriesData // 使用新构建的 seriesData
  })

  // var charts = {
  //     // 按顺序排列从大到小
  //     cityList: ["38号点（1）", "38号点（2）", "15号点", "16号点", "24号点"],
  //     cityData: [7500, 6200, 5700, 4200, 3500],
  // };
  // var top10CityList = charts.cityList;
  // var top10CityData = charts.cityData;
  // var color = [
  //     "rgba(248,195,248",
  //     "rgba(100,255,249",
  //     "rgba(135,183,255",
  //     "rgba(248,195,248",
  //     "rgba(100,255,249",
  // ];

  // let lineY = [];
  // for (var i = 0; i < charts.cityList.length; i++) {
  //     var x = i;
  //     if (x > color.length - 1) {
  //         x = color.length - 1;
  //     }
  //     var data = {
  //         name: charts.cityList[i],
  //         color: color[x] + ")",
  //         value: top10CityData[i],
  //         itemStyle: {
  //             normal: {
  //                 show: true,
  //                 color: new echarts.graphic.LinearGradient(
  //                     0,
  //                     0,
  //                     1,
  //                     0,
  //                     [
  //                         {
  //                             offset: 0,
  //                             color: color[x] + ", 0.3)",
  //                         },
  //                         {
  //                             offset: 1,
  //                             color: color[x] + ", 1)",
  //                         },
  //                     ],
  //                     false
  //                 ),
  //                 barBorderRadius: 10,
  //             },
  //             emphasis: {
  //                 shadowBlur: 15,
  //                 shadowColor: "rgba(0, 0, 0, 0.1)",
  //             },
  //         },
  //     };
  //     lineY.push(data);
  // }
  // 绘制柱状图
  const moneyArray = dateinformation1.value.map((info) => {
    // 如果 date 数组为空或者第一个元素不存在，则返回一个默认值（例如 0）
    if (info.date.length === 0 || !info.date[0]) {
      return 0 // 或者可以返回其他默认值
    }
    // 否则返回第一个 date 对象的 money 属性值
    return info.date[0].money
  })
  const moneyArray1 = dateinformation1.value.map((info) => {
    // 如果 date 数组为空或者第一个元素不存在，则返回一个默认值（例如 0）
    if (info.date.length === 0 || !info.date[1]) {
      return 0 // 或者可以返回其他默认值
    }
    // 否则返回第一个 date 对象的 money 属性值
    return info.date[1].money
  })
  const allMonths = new Set()
  dateinformation1.value.forEach((restaurant) => {
    restaurant.date.forEach((dateItem) => {
      allMonths.add(dateItem.month)
    })
  })
  const pieChartData = dateinformation1.value.map((item) => {
    return {
      text: item.restaurantname,
      max: 100000
    }
  })

  console.log('dsasad')
  console.log(moneyArray)
  barChart.setOption({
    title: {
      text: '餐厅月销售额对比',
      textStyle: {
        align: 'center',
        color: '#fff',
        fontSize: 20
      },
      top: '3%',
      left: '0%'
    },
    backgroundColor: '#101736',
    color: ['#00c2ff', '#f9cf67', '#e92b77'],
    legend: {
      show: true,
      // icon: 'circle',//图例形状
      bottom: 45,
      center: 0,
      itemWidth: 14, // 图例标记的图形宽度。[ default: 25 ]
      itemHeight: 14, // 图例标记的图形高度。[ default: 14 ]
      itemGap: 21, // 图例每项之间的间隔。[ default: 10 ]横向布局时为水平间隔，纵向布局时为纵向间隔。
      textStyle: {
        fontSize: 14,
        color: '#ade3ff'
      },
      data: ['4月', '5月']
    },
    toolbox: {
      //工具栏,内置有导出图片，数据视图，动态类型切换，数据区域缩放，重置五个工具。
      feature: {
        //各工具配置项。

        restore: {
          //配置项还原。
          show: true
        },
        saveAsImage: {
          //保存为图片。
          show: true
        }
      }
    },
    radar: [
      {
        indicator: pieChartData,

        textStyle: {
          color: 'red'
        },
        center: ['50%', '50%'],
        radius: 102,
        startAngle: 90,
        splitNumber: 3,
        orient: 'horizontal', // 图例列表的布局朝向,默认'horizontal'为横向,'vertical'为纵向.
        // shape: 'circle',
        // backgroundColor: {
        //     image:imgPath[0]
        // },
        name: {
          formatter: '{value}',
          textStyle: {
            fontSize: 14, //外圈标签字体大小
            color: '#5b81cb' //外圈标签字体颜色
          }
        },
        splitArea: {
          // 坐标轴在 grid 区域中的分隔区域，默认不显示。
          show: true,
          areaStyle: {
            // 分隔区域的样式设置。
            color: ['#141c42', '#141c42'] // 分隔区域颜色。分隔区域会按数组中颜色的顺序依次循环设置颜色。默认是一个深浅的间隔色。
          }
        },
        // axisLabel:{//展示刻度
        //     show: true
        // },
        axisLine: {
          //指向外圈文本的分隔线样式
          lineStyle: {
            color: '#153269'
          }
        },
        splitLine: {
          lineStyle: {
            color: '#113865', // 分隔线颜色
            width: 1 // 分隔线线宽
          }
        }
      }
    ],
    series: [
      {
        name: '雷达图',
        type: 'radar',
        itemStyle: {
          emphasis: {
            lineStyle: {
              width: 4
            }
          }
        },
        data: [
          {
            name: '4月',
            value: moneyArray,
            areaStyle: {
              normal: {
                // 单项区域填充样式
                color: {
                  type: 'linear',
                  x: 0, //右
                  y: 0, //下
                  x2: 1, //左
                  y2: 1, //上
                  colorStops: [
                    {
                      offset: 0,
                      color: '#00c2ff'
                    },
                    {
                      offset: 0.5,
                      color: 'rgba(0,0,0,0)'
                    },
                    {
                      offset: 1,
                      color: '#00c2ff'
                    }
                  ],
                  globalCoord: false
                },
                opacity: 1 // 区域透明度
              }
            },
            symbolSize: 2.5, // 单个数据标记的大小，可以设置成诸如 10 这样单一的数字，也可以用数组分开表示宽和高，例如 [20, 10] 表示标记宽为20，高为10。
            label: {
              // 单个拐点文本的样式设置
              normal: {
                show: true, // 单个拐点文本的样式设置。[ default: false ]
                position: 'top', // 标签的位置。[ default: top ]
                distance: 2, // 距离图形元素的距离。当 position 为字符描述值（如 'top'、'insideRight'）时候有效。[ default: 5 ]
                color: '#6692e2', // 文字的颜色。如果设置为 'auto'，则为视觉映射得到的颜色，如系列色。[ default: "#fff" ]
                fontSize: 14, // 文字的字体大小
                formatter: function (params) {
                  return params.value
                }
              }
            },
            itemStyle: {
              normal: {
                //图形悬浮效果
                borderColor: '#00c2ff',
                borderWidth: 2.5
              }
            },
            lineStyle: {
              normal: {
                opacity: 0.5 // 图形透明度
              }
            }
          },
          {
            name: '5月',
            value: moneyArray1,
            symbolSize: 2.5,
            itemStyle: {
              normal: {
                borderColor: '#f9cf67',
                borderWidth: 2.5
              }
            },
            areaStyle: {
              normal: {
                // 单项区域填充样式
                color: {
                  type: 'linear',
                  x: 0, //右
                  y: 0, //下
                  x2: 1, //左
                  y2: 1, //上
                  colorStops: [
                    {
                      offset: 0,
                      color: '#f9cf67'
                    },
                    {
                      offset: 0.5,
                      color: 'rgba(0,0,0,0)'
                    },
                    {
                      offset: 1,
                      color: '#f9cf67'
                    }
                  ],
                  globalCoord: false
                },
                opacity: 1 // 区域透明度
              }
            },
            label: {
              // 单个拐点文本的样式设置
              normal: {
                show: true, // 单个拐点文本的样式设置。[ default: false ]
                position: 'top', // 标签的位置。[ default: top ]
                distance: 2, // 距离图形元素的距离。当 position 为字符描述值（如 'top'、'insideRight'）时候有效。[ default: 5 ]
                color: '#6692e2', // 文字的颜色。如果设置为 'auto'，则为视觉映射得到的颜色，如系列色。[ default: "#fff" ]
                fontSize: 14, // 文字的字体大小
                formatter: function (params) {
                  return params.value
                }
              }
            },
            lineStyle: {
              normal: {
                opacity: 0.5 // 图形透明度
              }
            }
          }
          // {
          //     name: "2018",
          //     value: [37, 80, 12, 50, 25, 99],
          //     symbolSize: 2.5,
          //     itemStyle: {
          //         normal: {
          //             borderColor: "#e92b77",
          //             borderWidth: 2.5,
          //         },
          //     },
          //     areaStyle: {
          //         normal: {
          //             // 单项区域填充样式
          //             color: {
          //                 type: "linear",
          //                 x: 0, //右
          //                 y: 0, //下
          //                 x2: 1, //左
          //                 y2: 1, //上
          //                 colorStops: [
          //                     {
          //                         offset: 0,
          //                         color: "#e92b77",
          //                     },
          //                     {
          //                         offset: 0.5,
          //                         color: "rgba(0,0,0,0)",
          //                     },
          //                     {
          //                         offset: 1,
          //                         color: "#e92b77",
          //                     },
          //                 ],
          //                 globalCoord: false,
          //             },
          //             opacity: 1, // 区域透明度
          //         },
          // },
          // },
        ]
      }
    ]
  })

  let xLabel = dateinformation.value.map((item) => item.restaurantname)
  // 绘制柱状图
  barChart1.setOption({
    title: {
      text: '餐厅订单数对比',
      textStyle: {
        align: 'center',
        color: '#fff',
        fontSize: 20
      },
      top: '10%',
      left: '30%'
    },
    tooltip: {},
    backgroundColor: '#0f375f',
    animation: false,
    grid: {
      //也可设置left和right设置距离来控制图表的大小
      top: '35%',
      bottom: '30%',
      left: '10%', // 调整图表左边距
      right: '10%' // 调整图表右边距
    },
    toolbox: {
      //工具栏,内置有导出图片，数据视图，动态类型切换，数据区域缩放，重置五个工具。
      feature: {
        //各工具配置项。
        dataView: {
          //数据视图工具，可以展现当前图表所用的数据，编辑后可以动态更新。
          show: true, //是否显示组件。
          readOnly: false,
          optionToContent: function (opt) {
            var axisData = opt.xAxis[0].data
            var series = opt.series
            var table = '<table style="width:100%;text-align:center"><tbody><tr>' + '<td>餐厅</td>'
            for (var i = 0, l = series.length; i < l; i++) {
              table += '<td>' + series[i].name + '</td>'
            }

            for (var i = 0, l = axisData.length; i < l; i++) {
              table += '<tr>' + '<td>' + axisData[i] + '</td>'

              // 内部循环：根据 series 动态生成数据列
              for (var j = 0, len = series.length; j < len; j++) {
                table += '<td>' + series[j].data[i] + '</td>'
              }

              table += '</tr>'
            }

            table += '</tbody></table>'
            return table
          }
        },
        magicType: {
          //动态类型切换 示例：feature: { magicType: {type: ['line', 'bar', 'stack', 'tiled']}}
          show: true,
          type: ['line', 'bar', 'stack', 'tiled']
        },
        restore: {
          //配置项还原。
          show: true
        },
        saveAsImage: {
          //保存为图片。
          show: true
        }
      }
    },
    xAxis: {
      data: xLabel,
      axisLine: {
        show: true, //隐藏X轴轴线
        lineStyle: {
          color: '#11417a'
        }
      },
      axisTick: {
        show: false //隐藏X轴刻度
      },
      axisLabel: {
        show: true,
        margin: 14,
        fontSize: 14,
        textStyle: {
          color: '#A3C0DF' //X轴文字颜色
        },
        rotate: 45 // 旋转角度
      }
    },
    yAxis: [
      {
        type: 'value',
        gridIndex: 0,
        min: 0,
        max: 100,
        interval: 25,
        // splitNumber: 4,
        splitLine: {
          show: true,
          lineStyle: {
            color: '#113763',
            width: 1
          }
        },
        axisTick: {
          show: false
        },
        axisLine: {
          show: true,
          lineStyle: {
            color: '#11417a'
          }
        },
        axisLabel: {
          show: true,
          margin: 14,
          fontSize: 14,
          textStyle: {
            color: '#A3C0DF' //X轴文字颜色
          }
        }
      }
    ],
    series: [
      {
        name: '总销量',
        type: 'bar',
        barWidth: 30,
        itemStyle: {
          normal: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              {
                offset: 0,
                color: '#07ecd9'
              },
              {
                offset: 1,
                color: '#034881'
              }
            ])
          }
        },
        data: dateinformation.value.map((item) => item.sales),
        z: 10,
        zlevel: 0,
        label: {
          show: true,
          position: 'top',
          distance: 10,
          fontSize: 16,
          color: '#01fff4'
        }
      }
    ]
  })

  // 定义新的数据格式
  type NewDataFormat = {
    value: number
    name: string
  }

  // 将 dateinformation2 中的数据转换成新的格式
  const echartData1: NewDataFormat[] = dateinformation2.value.map((info) => ({
    value: parseInt(info.money), // 将 money 转换为数字类型
    name: info.name
  }))

  var scale = 1
  var echartData = echartData1
  var rich = {
    yellow: {
      color: '#ffc72b',
      fontSize: 30 * scale,
      padding: [5, 4],
      align: 'center'
    },
    total: {
      color: '#ffc72b',
      fontSize: 40 * scale,
      align: 'center'
    },
    white: {
      color: '#fff',
      align: 'center',
      fontSize: 14 * scale,
      padding: [21, 0]
    },
    blue: {
      color: '#49dff0',
      fontSize: 16 * scale,
      align: 'center'
    },
    hr: {
      borderColor: '#0b5263',
      width: '100%',
      borderWidth: 1,
      height: 0
    }
  }
  // 绘制饼图
  pieChart.setOption({
    backgroundColor: '#031f2d',
    title: {
      text: '总营业额',
      left: 'center',
      top: '53%',
      padding: [24, 0],
      textStyle: {
        color: '#fff',
        fontSize: 19 * scale,
        align: 'center'
      }
    },
    legend: {
      selectedMode: false,
      formatter: function (name: any) {
        var total = 0 //各科正确率总和
        var averagePercent //综合正确率
        echartData.forEach(function (value, index, array) {
          total += value.value
        })
        return '{total|' + total + '}'
      },
      data: [echartData[0].name],
      // data: ['高等教育学'],
      // itemGap: 50,
      left: 'center',
      top: 'center',
      icon: 'none',
      align: 'center',
      textStyle: {
        color: '#fff',
        fontSize: 16 * scale,
        rich: rich
      }
    },
    toolbox: {
      //工具栏,内置有导出图片，数据视图，动态类型切换，数据区域缩放，重置五个工具。
      feature: {
        //各工具配置项。

        restore: {
          //配置项还原。
          show: true
        },
        saveAsImage: {
          //保存为图片。
          show: true
        }
      }
    },
    series: [
      {
        name: '总人数',
        type: 'pie',
        radius: ['42%', '50%'],
        hoverAnimation: false,
        color: [
          '#c487ee',
          '#deb140',
          '#49dff0',
          '#034079',
          '#6f81da',
          '#00ffb4',
          '#c487ee',
          '#deb140',
          '#49dff0',
          '#034079',
          '#6f81da',
          '#00ffb4',
          '#c487ee',
          '#deb140',
          '#49dff0',
          '#034079',
          '#6f81da',
          '#00ffb4',
          '#c487ee',
          '#deb140',
          '#49dff0',
          '#034079',
          '#6f81da',
          '#00ffb4',
          '#c487ee',
          '#deb140',
          '#49dff0',
          '#034079',
          '#6f81da',
          '#00ffb4'
        ],
        label: {
          normal: {
            formatter: function (
              params: { value: string | number; name: string },
              ticket: any,
              callback: any
            ) {
              var total = 0 //考生总数量
              var percent = 0 //考生占比
              echartData.forEach(function (value, index, array) {
                total += value.value
              })
              percent = ((params.value / total) * 100).toFixed(1)
              return (
                '{white|' +
                params.name +
                '}\n{hr|}\n{yellow|' +
                params.value +
                '}\n{blue|' +
                percent +
                '%}'
              )
            },
            rich: rich
          }
        },
        labelLine: {
          normal: {
            length: 16 * scale,
            length2: 0,
            lineStyle: {
              color: '#0b5263'
            }
          }
        },
        data: echartData
      }
    ]
  })

  // 监听窗口大小变化，自适应图表
  window.addEventListener('resize', () => {
    lineChart.resize()
    barChart.resize()
    pieChart.resize()
    lineChart1.resize()
    barChart1.resize()
  })
}
</script>
<style scoped>
.home {
  width: 100%;
  height: 888px;
  background: url(./images/bg1.png) no-repeat;
  background-size: cover;

  .user-info {
    display: flex;
    align-items: center;

    .user-img {
      width: 150px;
      height: 150px;
      border-radius: 100%;
      margin-right: 40px;
    }

    & li:nth-child(1) {
      font-size: 30px;
    }

    & li:nth-child(2) {
      margin-top: 10px;
      font-size: 16px;
      color: rgb(153, 153, 153);
    }
  }

  .login-info {
    font-size: 14px;
    color: rgb(153, 153, 153);

    li {
      margin: 5px;

      span {
        margin-left: 50px;
      }
    }
  }

  .table {
    margin-top: 30px;
  }

  .num {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;

    .el-card {
      width: 32%;
      height: 90px;
      margin-bottom: 20px;
      border: none;

      i {
        width: 90px;
        height: 100%;
        line-height: 90px;
        text-align: center;
        font-size: 30px;
        color: #fff;
      }

      ul {
        display: flex;
        flex-direction: column;
        justify-content: center;
        margin-left: 20px;

        li:nth-child(1) {
          font-size: 30px;
          color: #000;
          margin-bottom: 5px;
        }

        li:nth-child(2) {
          font-size: 15px;
          color: rgb(148, 148, 148);
        }
      }
    }
  }

  #line {
    width: 100%;
    height: 280px;
  }

  #line1 {
    width: 100%;
    height: 280px;
  }

  .bar-pie {
    width: 100%;
    display: flex;
    justify-content: space-between;

    #pie {
      width: 100%;
      height: 300px;
    }

    #bar {
      width: 100%;
      height: 300px;
    }
  }

  .bar-pie1 {
    width: 100%;
    display: flex;
    justify-content: space-between;

    #bar1 {
      width: 100%;
      height: 330px;
    }
  }
}

.top {
  width: 100%;
  height: 40px;
  display: flex;
  margin-bottom: 5%;

  .left {
    flex: 1.5;
    background: url(./images/dataScreen-header-left-bg.png) no-repeat;
    background-size: cover;

    .lbtn {
      width: 150px;
      height: 40px;
      float: right;
      background: url(./images/dataScreen-header-btn-bg-l.png) no-repeat;
      background-size: 100% 100%;
      text-align: center;
      line-height: 40px;
      color: #29fcff;
      font-size: 20px;
    }
  }

  .center {
    flex: 2;

    .title {
      width: 100%;
      height: 74px;
      background: url(./images/dataScreen-header-center-bg.png) no-repeat;
      background-size: 100% 100%;
      text-align: center;
      line-height: 74px;
      color: #29fcff;
      font-size: 30px;
    }
  }

  .right {
    flex: 1.5;
    background: url(./images/dataScreen-header-left-bg.png) no-repeat;
    background-size: cover;
    display: flex;
    justify-content: space-between;
    align-items: center;

    .rbtn {
      width: 150px;
      height: 40px;
      background: url(./images/dataScreen-header-btn-bg-r.png) no-repeat;
      background-size: 100% 100%;
      text-align: center;
      line-height: 40px;
      color: #29fcff;
    }

    .time {
      color: #29fcff;
      font-size: 20px;
    }
  }
}
</style>
